<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import SideBar from './SideBar.vue';

// 抽屉变量
const drawer = ref(false)

const changeStatus = () => {
    drawer.value = true
}

// 处理关闭回调
const handleClose = () => {
    drawer.value = false
}


</script>

<template>
    <div class="flex items-center justify-between px-3">
        <SideBar :drawer="drawer" @handleClose="handleClose()"></SideBar>

        <img
            @click="changeStatus()"
            src="../../../assets/content/bar-chart-horizontal-fill.png"
        >

        <div
            @click="console.log('选择日记本')"
            class="flex items-center justify-center"
        >
            <p class="text-lg font-md">日记本</p>
            <img
                class="w-8 h-6 opacity-70"
                src="../../../assets/content/arrow-down-s-line.png"
            >
        </div>

        <router-link to="/edit">
            <img
                @click=""
                src="../../../assets/content/edit-box-line.png"
            >

        </router-link>
    </div>
</template>

<style scoped></style>